<script setup>
import axios from 'axios';
import { ref } from 'vue';
const students = ref([
      { stuNo: '', name: '', classNo: '' },
      { stuNo: '', name: '', classNo: '' },
      { stuNo: '', name: '', classNo: '' },
      { stuNo: '', name: '', classNo: '' },
      { stuNo: '', name: '', classNo: '' }
    ]);

const outerDiameter1 = ref(0);
const outerDiameter2 = ref(0);
const outerDiameter3 = ref(0);
const wallThick1 = ref(0);
const wallThick2 = ref(0);
const wallThick3 = ref(0);

const finish = async () => {
      // 提取五个学号
      const studentNumbers = students.value.map(student => student.stuNo);
      console.log(studentNumbers)

      // 构建参数对象
      // const dataToSubmit = {
      //   stuNos: JSON.parse(studentNumbers),
      // };

      try {
        // 发送请求并传递参数对象
        const response = await axios.post('api/administrator/finshBaopoExp', studentNumbers);
        if (response.data.code === 1) {
          console.log(response.data);
          alert(response.data.data);
            // console.log(students) 
        } else {
          alert(response.data.msg);
        }
        
      } catch (error) {
        console.error(error);
        alert('结束实验失败：发生错误');
      }
    };

const confirm = async () => {
      // 提取五个学号
      const studentNumbers = students.value.map(student => student.stuNo);
      // console.log(studentNumbers)

      // 构建参数对象
      const dataToSubmit = {
        stuNos: studentNumbers,
        outerDiameter1: outerDiameter1.value,
        outerDiameter2: outerDiameter2.value,
        outerDiameter3: outerDiameter3.value,
        wallThick1: wallThick1.value,
        wallThick2: wallThick2.value,
        wallThick3: wallThick3.value,
      };

      try {
        // 发送请求并传递参数对象
        const response = await axios.post('api/administrator/confirmBaopo', dataToSubmit);
        if (response.data.code === 1) {
          console.log(response.data);
          alert(response.data.data);
            // console.log(students) 
        } else {
          alert(response.data.msg);
        }
        
      } catch (error) {
        console.error(error);
        alert('确认失败：发生错误');
      }
    };


const getStudents = async()=>{
    try {
        const response = await axios.get('api/administrator/updateBaopogroup');
        if (response.data.code === 1) {
            // console.log(response.data),
            // console.log(students)
            // students.value=response.data.data;
            // console.log(students) 
            const newData = response.data.data;
            console.log(newData)
          // 更新学生数组循环
          for (let i = 0; i < 5; i++) {
            if (i < newData.length) {
              students.value[i] = newData[i];
            } else {
              students.value[i] = { stuNo: '', name: '', classNo: '' };
            }
          }
        } else {
          alert(response.data.msg);
        }
      } 
      catch (error) {
        console.error(error);
        // 处理其他错误情况
        alert('获取学生信息失败：发生错误');
      }
}
</script>

<template>

    <div class="page">
  <div class="left-vedio">
    <table class="table">
      <tr>
      <th class="custom-cell4" colspan="3">实验小组成员</th>
    </tr>
    <tr>
      <td class="custom-cell1">学号</td>
      <td class="custom-cell2">姓名</td>
      <td class="custom-cell3">班级</td>
    </tr>
    <tr v-for="student in students" :key="student.id">
                  <td class="custom-cell1">{{ student.stuNo || '' }}</td>
                  <td class="custom-cell2">{{ student.name || '' }}</td>
                  <td class="custom-cell3">{{ student.classNo || '' }}</td>
              </tr>
    <!-- <tr>
      <td class="custom-cell1"></td>
      <td class="custom-cell2"></td>
      <td class="custom-cell3"></td>
    </tr>
    <tr>
      <td class="custom-cell1"></td>
      <td class="custom-cell2"></td>
      <td class="custom-cell3"></td>
    </tr>
    <tr>
      <td class="custom-cell1"></td>
      <td class="custom-cell2"></td>
      <td class="custom-cell3"></td>
    </tr>
    <tr>
      <td class="custom-cell1"></td>
      <td class="custom-cell2"></td>
      <td class="custom-cell3"></td>
    </tr>
    <tr>
      <td class="custom-cell1"></td>
      <td class="custom-cell2"></td>
      <td class="custom-cell3"></td>
    </tr> -->
  </table>
  <div class="left-vedio-down">
  <button class="mybutton1" @click="getStudents">小组更新</button>
  <button class="mybutton2" @click="confirm">确认</button>
  </div>
</div>
  <div class="right-control">
    <div class="right1">
      爆破实验控制面板
    </div>
    <div class="right2">
      ①请老师测量并输入试件参数，并且核对实验小组人员后点击“确认”，学生端方可点击开始实验。<br>
      ②待实验完毕后，请老师点击“结束实验”，提醒学生实验结束，下载实验数据<br>
      ③待本组实验人员完成实验后，点击“小组更新”，进行下一组实验人员的实验控制。
    </div>
    <div class="right3">
    <table class="table2">
    <tr>
      <td class="custom-cell5">外径1：<input type="text" v-model="outerDiameter1" class="custom-input"></td>
    </tr>
    <tr>
      <td class="custom-cell5">外径2：<input type="text" v-model="outerDiameter2" class="custom-input"></td>
    </tr>
    <tr>
      <td class="custom-cell5">外径3：<input type="text" v-model="outerDiameter3" class="custom-input"></td>
    </tr>
    <tr>
      <td class="custom-cell5">壁厚1：<input type="text" v-model="wallThick1" class="custom-input"></td>
    </tr>
    <tr>
      <td class="custom-cell5">壁厚2：<input type="text" v-model="wallThick2" class="custom-input"></td>
    </tr>
    <tr>
      <td class="custom-cell5">壁厚3：<input type="text" v-model="wallThick3" class="custom-input"></td>
    </tr>
  </table>
  <button class="mybutton3" @click="finish">结束实验</button>
  </div>
  </div>
</div>

</template>

<style scoped>
     .left-vedio {
      display: flex;
    flex-direction: column;
    
    align-items: center; /* 垂直居中 */
    width: 744px;
    height: 922px;
    background-color: rgb(253, 253, 253);
  }
  .left-vedio-down {
      display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center;
    width: 744px;
    height: 300px;
    background-color: rgb(253, 253, 253);
  }
  
  .right-control {
    display: flex;
    flex-direction: column;
    align-items: center; /* 垂直居中 */
    
    width: 565px;
    height: 922px;
    /* background-color: blueviolet; */
  }
  .page {
  width: 100%;
  height: 100%;
}
  .right1{
    position: relative;
    top: 100px;
    width: 224px;
    height: 41px;
    color: rgba(16, 16, 16, 1);
    font-size: 28px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
    /* background-color: aquamarine; */
  }
  .right2{
    position: relative;
    top: 120px;
    width: 387px;
    height: 235px;
    color: rgba(16, 16, 16, 1);
    font-size: 20px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
    /* background-color: chartreuse; */
  }
  .right3{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    align-items: center; /* 水平居中 */
    top: 130px;
    width: 387px;
    height: 450px;
    color: rgba(16, 16, 16, 1);
    font-size: 20px;
    font-family: SourceHanSansSC-regular;
  /* background-color: rgb(204, 11, 185); */
  overflow: hidden; /* 添加溢出隐藏，以便容纳绝对定位的表格 */
  padding: 10px; /* 添加一些内边距来容纳表格 */
  }
  .table {
      border-collapse: collapse; /* 合并边框样式 */
      margin-top: 174px;
      margin-left: 174px;
      /* border: 1px solid #000000; 设置表格外边框为1px实线边框，颜色为深灰色 */
      border-left: 2px solid #7c7c7c; /* 设置左边框 */
      border-top: 2px solid #7c7c7c; /* 设置上边框 */
      border-right: 2px solid #7c7c7c; /* 设置左边框 */
      border-bottom: 2px solid #7c7c7c; /* 设置上边框 */
      
      border-spacing: 0; /* 设置边框间距为0 */
      position: relative;
    
    }
    
    th, td {
      border: 1px solid #ccc; /* 设置边框样式 */
      padding: 10px; /* 设置内边距 */
      text-align: center; /* 文本居中对齐 */
      vertical-align: middle;
    }
    .table2 {
      position: absolute; /* 使用绝对定位 */
      top: 10px; /* 将表格定位到right3盒子的顶部 */
      border-collapse: collapse; /* 合并边框样式 */
      border: 1px solid #7c7c7c; /* 设置左边框 */
      /* border-top: 2px solid #7c7c7c;
      border-right: 2px solid #7c7c7c; 
      border-bottom: 2px solid #7c7c7c;  */
    }

    .td1 {
      border: 1px solid #ccc; /* 设置边框样式 */
      padding: 10px; /* 设置内边距 */
      text-align: left; /* 文本居中对齐 */
    }
    /* 自定义单元格样式 */
    .custom-cell1 {
      
      /* color: rgb(5, 5, 5); */
      /* left: 174px;
      top: 174px; */
      color: black;
      width: 193px;
      height: 66px;
      line-height: 20px;
      background-color: rgba(255, 255, 255, 1);
      font-size: 28px;
      text-align: center;
      font-family: Microsoft Yahei;
    }

    .custom-cell2 {
      /* left: 488px;
      top: 406px; */
      color: black;
      width: 193px;
      height: 66px;
      line-height: 20px;
      background-color: rgba(255, 255, 255, 1);
      font-size: 28px;
      text-align: center;
      font-family: Microsoft Yahei;
    }

    .custom-cell3 {
      /* left: 681px;
      top: 406px; */
      color: black;
      width: 194px;
      height: 66px;
      line-height: 20px;
      background-color: rgba(255, 255, 255, 1);
      font-size: 28px;
      text-align: center;
      font-family: Microsoft Yahei;
    }
    .custom-cell4 {
      
      color: black;
      width: 194px;
      height: 66px;
      line-height: 20px;
      background-color: rgb(232, 232, 232);
      text-align: center;
      /* color: rgb(0, 0, 0); */
      font-size: 36px;
      text-align: center;
      font-family: Microsoft Yahei;
    }
    .custom-cell5
    {  
      
      width: 180px;
      height: 40px;
      color: rgba(0, 0, 0, 1);
      font-size: 20px;
      text-align: left;
      font-family: Microsoft Yahei;
      border: 1px solid rgba(0, 0, 0, 1);
      padding: 5px; /* 调整内边距，使文字靠近表格框线 */
      
    }
   

    .mybutton1{
      position: relative;
      margin-left: 224px;
      
      width: 121px;
      height: 53px;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 20px;
      text-align: center;
      font-family: Microsoft Yahei;
      border: 1px solid rgba(187, 187, 187, 1);
    }
    .mybutton2{
      position: relative;
      margin-left: 254px;
      
      width: 121px;
      height: 53px;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 20px;
      text-align: center;
      font-family: Microsoft Yahei;
      border: 1px solid rgba(187, 187, 187, 1);
    }
    .mybutton3{
      
      position: relative;
      margin-right: 24px;
      margin-top: 337px;
      width: 121px;
      height: 53px;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 20px;
      text-align: center;
      font-family: Microsoft Yahei;
      border: 1px solid rgba(187, 187, 187, 1);
    }
  .custom-input {
      border: none; /* 去除边框 */
      outline: none; /* 去除轮廓 */
      /* padding: 5px; 添加内边距，以改善外观 */
      /* margin: 2px; 添加一些间距 */
      width: 60px;
      height: 41px;
      font-size: 20px;
      text-align: center;
      font-family: Microsoft Yahei;
      display: inline-block; /* 让输入框在一行显示 */
}
    /* .mybutton1:hover {
    background-color: #2980b9;
  }
  
  .mybutton1:active {
    background-color: #1f6693;
  }
  .mybutton2:hover {
    background-color: #2980b9;
  }
  
  .mybutton2:active {
    background-color: #1f6693;
  }
  .mybutton3:hover {
    background-color: #2980b9;
  }
  
  .mybutton3:active {
    background-color: #1f6693;
  } */
</style>
